<template>
    <div class="container">
        <div class="mar">
            <h3>联系我们</h3>
             <div class="col-lg-12">
                <div style="height: 480px;margin: 0px;padding: 0px">
                <div id="container" style="height: 100%">

                </div></div>
            </div>
            <p>Lorem ipsum dolor坐下来，管教着迷。目前的重塑。茉莉胶印局开始。南门。临床承接各种亲爱的。当立即拉射线超级碗山。不值得。临床欧盟 现在讨厌足球，但怀孕，奔跑或哀悼lolor。Maecenas tristique orci ac em。Duis ulpharies pharetra magna。直到临床积累。此外，色情。Lorem ipsum dolor坐下来，管教着迷。最大的热身感觉很棒。狮子。给该地区带来痛苦，减少电网，Fireworks运行免赔额服务。茉莉花作家炖锅。麸质。最不诚实的。足球场前的完美妆容。</p>
        </div>
        <div class="row">
            <div class="col-lg-4 con">
                <h3>位置</h3>
                <div class="co">
                    <span class="dis mr-3"></span>
                    <div><span>马莫拉路街8901，</span> 
                        <p>格拉斯哥89号</p></div>
                </div>
            </div>
            <div class="col-lg-4 con">
                <h3>电话</h3>
                <div class="co">
                    <span class="phone mr-3"></span>
                    <div><span>0311-67453262</span>
                        <p>0311-7734343</p></div>
                </div>
            </div>
            <div class="col-lg-4 con">
                <h3>邮箱</h3>
                <div class="co em">
                    <span class="email mr-3"></span>
                    <div><span>456321232@qq.com</span></div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <h3>联系表</h3>
                <form action="" class="cent">
                    <div class="row info">
                        <input type="text" name="txt" placeholder="姓名" id="txt">
                        <input type="email" name="emi" placeholder="电子邮箱" id="emil">
                        <input type="text" name="ttt" placeholder="联系方式" pattern="\d{11}" id="link">
                    </div>
                    <div class="row">
                        <textarea placeholder="信息" class="col-12" id="mssage"></textarea>
                    </div>
                    <input type="button" value="提交" class="sub row" @click="sub()">
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        // name: "content",
        data(){
            return {
                name:'',email:'',linkStyle:'',msg:''
            }
        },
        mounted(){
            this.maps()
        },
        methods:{
            maps(){
                var map = new BMap.Map("container");    
                var point = new BMap.Point(116.404, 39.915);    
                map.centerAndZoom(point, 15); 
            },
            sub(){
                this.name=$("#txt").val();
                this.email=$("#emil").val();
                this.linkStyle=$("#link").val();
                this.msg=$("#message").val();
                this.$axios.post("http://localhost:3000/linkOur","name="+String(this.name)+"&email="+String(this.email)+"&link="+String(this.linkStyle)+"&msg="+String(this.msg)).then((data)=>{
                        console.log(data);
                        if(data.data.code==200){
                            alert(data.data.msg);
                        }else if(data.data.code==400){
                            alert(data.data.msg);
                        }
                    })
            }
        }
    }
</script>

<style scoped lang="less">
    p{margin: 0;}
    .mar p{margin-top: 2rem;}
    .dis{background: url("../../public/img/dot.png") no-repeat;width: 24px;height: 24px}
    .phone{background: url("../../public/img/phone.png") no-repeat;width: 24px;height: 24px}
    .email{background: url("../../public/img/message.png") no-repeat;width: 24px;height: 24px}
    .con{align-items: center;
        display: flex;
        flex-flow: column;
        margin-top: 3rem;}
    .con h3{
        font-size: 20px;
        letter-spacing: -2px;
        color: #626262;
        margin: 0 0 1.5em;}
    .co{color: #989797;
        font-size: 15px;display: flex;
        align-items: center}
        .em{margin-top: 0.7rem;}
    h3{margin: 3rem 0 1em;color: #F05992;
        font-size: 30px;
        text-align: center;
        letter-spacing: -1px;}
    .info{justify-content: space-between}
    .info input,.row textarea{outline: none;
        padding: 15px 10px;
        border: 1px solid #C2BFBF;
        font-size: 13px;
        width: 32%;
        color: #000;}
    textarea{
        width: 100%;
        margin: 1.5em 0 3em;
        resize: none;
        height: 300px;}
    .sub{outline: none;
        background: #FF9BC1;
        transition: 0.5s all;
        color: #fff;
        font-weight: 600;
        padding: 9px 80px;
        font-size: 20px;
        border: none;margin-bottom: 2.5rem;}
</style>